<!--
 * @Author: wjn
 * @Date: 2021-07-12 14:49:49
 * @LastEditTime: 2021-07-14 00:11:37
 * @LastEditors: wjn
 * @Description: 
 * @FilePath: \briup\day03\students.html
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/details.css">
    <title>行学天下-游学项目详情</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
<body>
    <div id="students">
      <!-- 头部 -->
    <div id="details">
    <div class="header">
      <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="点击此处，返回首页。">
        <div slot="reference" class="headLeft">
          <div class="logo" title="返回首页" @click="toIndex()">
            行学天下
          </div>
          <div class="title" title="返回首页" @click="toIndex()">
            行学天下
          </div>
        </div>
      </el-popover>

      <div class="headRight">
        <div class="callMe">
          <a href="#callMe">
            <img src="image/callMe.png" alt="图片丢失了">
            联系我们
          </a>
        </div>
      </div>
    </div>
    </div>

    <div class="main">
      <div class="title">
          {{articleDetails.title}}
      </div>
      <div class="time">
          {{formatDate(articleDetails.publishTime)}} | {{articleDetails.baseUser.realname}}
      </div>
      <div  class="read">
      <img src="image/eye.png" alt="图片丢失了"> {{articleDetails.readTimes}}
      </div>
      <div class="details" v-html="articleDetails.content">
      <!--{{htmlToText(projectDetails.details)}}-->
      </div>
      
      <div class="likeBtn">
        <el-button type="warning" icon="el-icon-star-off" circle @click.stop="thumbUp(articleDetails.id)"></el-button>
      </div>
      <div class="toIndex">
        <!--<div class="myBtn" @click="toIndex()">点击此处返回首页</div>-->
        <el-button plain type="primary" @click="toIndex()">点击此处返回首页</el-button>
      </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom=200></el-backtop>
    </div>
  
    <!-- 页面底部信息 -->
    <div class="footer">
      <div id="callMe" class="callMe">
        联系我们（工作时间：9:00-17:30）
        021-56778147
        <a href="https://briup.cn">https://briup.cn</a>
        <!-- 通过qq实现在线客服功能 -->
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1729448763&Site=%e6%9d%b0%e6%99%ae&Menu=yes">在线客服</a>
      </div>
      <div class="beiAn">
        <a href="http://beian.miit.gov.cn">
          京ICP备XXXXXXX号
        </a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
      </div>
      <div class="callMe">
        ©1999-2021杰普软件科技有限公司
      </div>
    </div>
   </div>
</body>

<script>
    new Vue({
        el: '#students',
        data: {
            articleDetails: [],
            article: [],
        },
        created() {
            //接口
            var id = window.location.search.split('=')[1];
            console.log(id);
            axios.get('http://47.94.46.113:8888/index/article/findById?id=' + id).then((res) => {
                this.articleDetails = res.data.data
            });
           

        },
        methods:{
             // 将时间戳格式化
         formatDate(date){
        return moment(date).format('YYYY-MM-DD')
      },
     
        // 点赞
        thumbUp(id) {
        axios.get('http://47.94.46.113:8888/index/article/thumbUp?id=' + id).then((res) => {
          // 刷新点赞数
          this.$message({
            message: res.data.message,
            type: 'success'
          });
        })
      },

     // htmlToText(html){
      //  return html.replace(new RegExp('<.+?>','g'),'')
     //   },
     //回到首页
        toIndex(){
            window.location.href='index.html'
        }
        }
       
    })
</script>
</html>